import * as React from 'react';
import { Color } from '../model/color'

// 给个接口的约定
// 设置一个color接口
interface Props {
    color: Color
}

// 优雅简洁
// tsx 核心 + 约束
// React.FC  函数式组件
// React.FC是由 interface  type  接口或者类型  来自于@types/react
// Props  在函数式组件上约束参数的类型
// ts 是 js 的超集  不写ts也可以
// 1. 组件是函数式组件
// 2. 约束父组件  一定要给它传某个值
// <>  表示泛型，泛指内部的一个泛型
export const ColorBrowser:React.FC<Props> = (props) => {
    const divStyle:React.CSSProperties= {
        width: "11rem",
        height: "7rem",
        // 定义一个接口，接口的定义:满足这个接口
        backgroundColor: `rgb(${props.color.red}, ${props.color.green}, ${props.color.blue})`
    }
    return <div style={divStyle}/>
}